<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body>
    <form action="#" name="myform">
        <input type="text" name="Filename" placeholder="请输入文件名">
        <input type="text" name="Fileorder" placeholder="请输入文件顺序">
        <input type="file" id="File" name="File" multiple>
        <img src="" id="pic" alt="" width="100px">
        <button id="btn">提交</button>
    </form>

    <script>
        // change事件：当表单发生变化并且失去焦点的时候 触发事件
        // input事件：只要表单发生变化就会触发事件

        const Ofile = document.getElementById('File')
        const Opic = document.getElementById('pic')
        const Obtn = document.getElementById('btn')

        

        // 绑定一个提交按钮点击事件 进行表单数据的获取
        Obtn.onclick = function(e){
            e.preventDefault()
            // js本身提供了 formData 来进行表单数据的获取
            // 首先建立一个formData的实例 将整个表单传进去  利用get方法获取表单中的各个信息
            const myformData = new FormData(document.myform)
            // console.log(myformData.get('Filename'));
            // console.log(myformData.get('Fileorder'));
            // console.log(myformData.get('File'));



            axios.post('http://127.0.0.1:3434/addFile', myformData)
        }


        // 绑定一个表单change事件 进行图片预览
        Ofile.onchange = function(e){
            e.preventDefault()
            // 事件的files属性中存放着上传文件的各种信息
            console.log(this.files);
            const filesmsg = this.files

            // FileReader是js提供的一个异步读取文件的类
            const reader = new FileReader()
            // reader上有个readAsDataURL的方法 可以将文件读成成64base的格式
            reader.readAsDataURL(this.files[0]);
            // 当文件读取完成的时候 会触发一个事件
            reader.onload = function(e){
            //   console.log(e.target.result); 
                Opic.src = e.target.result;
            }
        }
   
   </script>
</body>
</html>